<template>
  <div class="level">
    <h1>医院</h1>
    <div class="content">
      <div>
        <span>等级：</span>
      </div>
      <ul>
        <li :class="{ active: activeFlag === '' }" @click="onlevelClick('')">全部</li>
        <li :class="{ active: activeFlag === item.value }" @click="onlevelClick(item.value)"
          v-for=" item  in  HospitalLevelAndRegionArr " :key="item.id">{{
            item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import type { HospitalLevelAndRegionResponseData, HospitalLevelAndRegionArr, HospitalLevelAndRegion } from '@/api/home/type'
import { reqLevelOrRegion } from '@/api/home/index.ts'
import { onMounted, ref, defineEmits } from 'vue';
// 缓存等级数据
let HospitalLevelAndRegionArr = ref<HospitalLevelAndRegionArr>([])
let activeFlag = ref<string>('')
// ts语法下的子组件传值，此处是传递自定义事件，利用回调方式进行传递事件
let emits = defineEmits<{
  (e: "onLevelChanged", data: string): void,
}>()
// 当组件挂载时向服务器请求等级信息
onMounted(async () => {
  let result = await reqLevelOrRegion("HosType")
  if (result.code == 200) {
    HospitalLevelAndRegionArr.value = result.data
  }
})
//当点击等级
const onlevelClick = (value: string) => {
  activeFlag.value = value
  // 组件执行查询，参数为接口中需要的参数，例如此处需要的value信息，1代表三级甲等，2代表
  emits("onLevelChanged", value)
}  
</script> 
<style scoped lang="scss">
.level {
  margin: 0px 0px 10px 0px;

  h1 {
    margin: 10px 0px;
    color: #7f7f7f;
  }

  .content {
    display: flex;
    align-items: center;
    color: #7f7f7f;

    ul {
      display: flex;

      li {
        cursor: pointer;
        margin-right: 10px;

        &.active {
          color: #55a6fe;
        }
      }

      li:hover {
        color: #55a6fe;
      }
    }
  }
}
</style>